<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<html>
<head>
    <title>Title</title>
    <link href="${pageContext.request.contextPath}/css/bootstrap.min.css" type="text/css" rel="stylesheet">
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-3.1.1.min.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/bootstrap.min.js"></script>
</head>
<body onload="loadDataList()">

<br>
<form class="form-horizontal">

</form>

<table class="table">
    <thead>
    <th>编号</th>
    <th>图标</th>
    <th>菜名</th>
    <th>单价</th>
    <th>操作</th>

    </thead>
    <tbody id="tb">

    </tbody>
</table>
<div>
    <button type="button" class="btn btn-success btn-sm" onclick="pres()">上一页</button>
    <button type="button" class="btn btn-success btn-sm" onclick="nexts()">下一页</button>
    一共有<span id="total"></span>数据，共有<span id="totalPage"></span>页
</div>
<%--模态框--%>

<div class="modal fade" id="one" style="top:200px">
<div class="modal-dialog">
<div class="modal-content">
<!--头部-->
<div class="modal-header" style="background-color: green; height: 20px;">
</div>
        <div class="modal-body">
<table class="table" border="0">
        <input type="hidden" id="idOne" >
        <input type="hidden" id="userid" value="${userId}" >
<tr>
        <td>份数</td>
        <td><input type="text" id="myNumber"></td>
</tr>

<tr>
<td colspan="2">
        <button type="button" onclick="updateNumber()" class="btn btn-success btn-sm">提交</button>
        </td>
</tr>
</table>
        </div>
        </div>
        </div>
</div>
</body>

<script>
    //默认页面是第一页
    var page = 1;
    var row = 5;
    var totalPage = 0;

    //上一页
    function pres() {
        page--;
        if (page < 1) {
            page = 1;
        }
        loadDataList();
    }

    //下一页
    function nexts() {
        page++;
        if (page > totalPage) {
            page = totalPage;
        }

        loadDataList();

    }

    //加载数据
    function loadDataList() {
        var name = $("#name").val();

        $.ajax({
            url: "${pageContext.request.contextPath}/menu/listAjax2?eType=甜点",
            type: "get",
            data: { "eName": name,"page": page, "row": row},
            dataType: "json",
            success: function (data) {
                console.log(data);
                console.log(typeof (data.info));
                if (typeof (data.info) == 'string') {
                    alert(data.info);
                    //清空
                    $("#tb").html(data.info);
                } else {
                    //取出总页数

                    totalPage = data.totalPage;
                    //显示总条数
                    $("#total").text(data.total);
                    //显示总页数
                    $("#totalPage").text(totalPage);

                    var html = "";
                    for (var i = 0; i < data.info.length; i++) {
                        html += "<tr>" +
                            "<td>" + data.info[i].eId + "</td>" +
                            "<td>" +" <img src=\"${pageContext.request.contextPath}/icon/"+data.info[i].eIcon+"\" "+" style=\"width"+":"+150+"px;height:"+100+"px\" + /></td>" +
                            "<td>" + data.info[i].eName + "</td>" +
                            "<td>" + data.info[i].ePrice + "</td>" +
                            "<td><button type=\"button\" class=\"btn btn-success btn-sm\" onclick='order(this)'>点餐</button></td>" +
                            "</tr>";
                    }

                    $("#tb").html(html);
                }


            }})
    }

    //点餐
   function order(obj) {

        $("#one").modal("show");
        var id = $(obj).parent().parent().find("td").eq(0).text();
        $("#idOne").val(id);
        var number = $(obj).parent().parent().find("td").eq(6).text();
        $("#myNumber").val(number);
        }
   function updateNumber() {
        var userid = $("#userid").val();
        var id = $("#idOne").val();
        var number = $("#myNumber").val();
        console.log(number);
        console.log(id);
        $.ajax({
        url: "${pageContext.request.contextPath}/menu/orderAjax",
        type: "get",
        data: {"userId":userid,"number": number,"eId":id},
        dataType: "json",
        success: function (data) {
        console.log(data);
        alert(data.info);
        $("#one").modal("hide");
        //刷新
        loadDataList();
   }
})
}

</script>


</html>